<template>
  <view class="main-bg">
    <z-nav-bar backState='3000' @backClick='backClick' type='transparent' :titleCenter='true' title=''></z-nav-bar>
    <public-module></public-module>
    <view class="header-gradient">
      <text class="main-title">个体工商户设立登记</text>
    </view>
    <view class="card-list">
      <view class="card-btn" v-for="(item, idx) in items" :key="idx" @tap="goPage(item.page)" hover-class="card-btn-hover">
        <text>{{ item.label }}</text>
        <view class="arrow"></view>
      </view>
    </view>
	<!-- @tap="previewTable" -->
    <view class="preview-btn" @tap="previewTable"  hover-class="preview-btn-hover">
      <text>预览表格信息</text>
    </view>
    <view class="save-btn" @tap="clearSync" hover-class="save-btn-hover">
      <text>清除数据</text>
    </view>
  </view>
</template>

<script>
	import $http from '@/config/requestConfig';
export default {
  data() {
    return {
      items: [
        { label: '经营者身份证上传', page: '/pages/idcard-owner' },
        { label: '委托人身份证上传', page: '/pages/idcard-agent' },
        { label: '基本信息', page: '/pages/base-info' },
        { label: '联络员信息', page: '/pages/contact-info' },
        { label: '委托人信息', page: '/pages/agent-info' },
        { label: '市场主体住所（经营场所）登记信息申报承诺书', page: '/pages/market-promise' },
      ]
    }
  },
  methods: {
    backClick() {
			uni.navigateBack()
			// 处理返回事件
		},
    goPage(page) {
      if(page) {
        uni.navigateTo({ url: page });
      } else {
        uni.showToast({ title: '敬请期待', icon: 'none' });
      }
    },
    previewTable() {
      // 先走保存逻辑，保存成功后再跳转预览
      this.printCache(true);
    },
    printCache(isPreview = false) {
      let cache = uni.getStorageSync('allFormData');
	  console.log(cache,"cache")
      // 生成唯一 id
      const uniqueId = this.generateUniqueId();
      // 把 id 加到缓存数据里
      cache = { ...cache, id: uniqueId };
      uni.showLoading({ title: '保存中...' });
      this.$http.post('jbsjtr/add', cache)
        .then(res => {
			// alert(res.message)
          uni.hideLoading();
		// let allFormData = uni.getStorageSync('allFormData')
		let idcard_agent_id = uni.getStorageSync('idcard_agent_id')
		let idcard_owner_id = uni.getStorageSync('idcard_owner_id')
		
          // 假设后端返回的 id 字段为 res.data.id
          const returnedId = res.message;
          // 单独保存 id 到缓存
          // uni.setStorageSync('lastSaveId', returnedId);
		  // let lastSaveId = uni.getStorageSync('lastSaveId')
          uni.showToast({ title: '保存成功', icon: 'success' });
          if (isPreview) {
            // 保存成功后跳转到预览页面
            uni.navigateTo({ url: `/pages/yulan?lastSaveId=${returnedId}&idcard_agent_id=${idcard_agent_id}&idcard_owner_id=${idcard_owner_id}`,
			 success() {
			 	
			
			 }
			 });
          }
        })
        .catch((err) => {
          uni.hideLoading();
          uni.showToast({ title: '保存失败'+err, icon: 'none' });
        });
    },
    clearSync(){
        setTimeout(() => {
            uni.removeStorageSync('allFormData');
            uni.removeStorageSync('idcard_agent_id');
            uni.removeStorageSync('idcard_owner_id');
            uni.removeStorageSync('idcard_owner_front_url');
            uni.removeStorageSync('idcard_owner_back_url');
            uni.removeStorageSync('idcard_owner_front_base64');
            uni.removeStorageSync('idcard_owner_back_base64');
            uni.removeStorageSync('idcard_agent_front_url');
            uni.removeStorageSync('idcard_agent_back_url');
            uni.removeStorageSync('idcard_agent_front_base64');
            uni.removeStorageSync('idcard_agent_back_base64');
            uni.showToast({ title: '清除缓存成功，请重新填写数据生成表格', icon: 'success' });
        }, 500);
    },

    generateUniqueId() {
      return Date.now() + '-' + Math.random().toString(36).substr(2, 9);
    }
  }
}
</script>

<style scoped>
.main-bg {
  min-height: 100vh;
  background: linear-gradient(135deg, #6db3f2 0%, #1e69de 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.header-gradient {
  width: 100vw;
  height: 110rpx;
  background: linear-gradient(135deg, #8ec5fc 0%, #e0c3fc 100%);
  border-bottom-left-radius: 40rpx;
  border-bottom-right-radius: 40rpx;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 32rpx;
  box-shadow: 0 8rpx 24rpx rgba(30,105,222,0.08);
}
.main-title {
  font-size: 40rpx;
  color: #222;
  font-weight: bold;
  letter-spacing: 2rpx;
}
.card-list {
  width: 86vw;
  margin-top: 60rpx;
  display: flex;
  flex-direction: column;
  gap: 32rpx;
}
.card-btn {
  background: #fff;
  border-radius: 20rpx;
  box-shadow: 0 4rpx 24rpx rgba(30,105,222,0.10);
  padding: 32rpx 36rpx;
  font-size: 30rpx;
  color: #222;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: transform 0.1s;
  position: relative;
  overflow: hidden;
}
.card-btn-hover {
  transform: scale(0.97);
  background: #f0f7ff;
}
.arrow {
  width: 24rpx;
  height: 24rpx;
  border-right: 4rpx solid #1e69de;
  border-bottom: 4rpx solid #1e69de;
  transform: rotate(-45deg);
  margin-left: 16rpx;
}
.preview-btn {
  margin: 60rpx auto 0 auto;
  width: 70vw;
  background: #fff;
  color: #1e69de;
  font-size: 32rpx;
  border-radius: 16rpx;
  box-shadow: 0 4rpx 24rpx rgba(30,105,222,0.10);
  text-align: center;
  padding: 28rpx 0;
  transition: background 0.1s, transform 0.1s;
}
.preview-btn-hover {
  background: #e0f0ff;
  transform: scale(0.98);
}
.save-btn {
  margin: 24rpx auto 0 auto;
  width: 70vw;
  background: #fff;
  color: #1e69de;
  font-size: 32rpx;
  border-radius: 16rpx;
  box-shadow: 0 4rpx 24rpx rgba(30,105,222,0.10);
  text-align: center;
  padding: 28rpx 0;
  transition: background 0.1s, transform 0.1s;
}
.save-btn-hover {
  background: #e0f0ff;
  transform: scale(0.98);
}
</style> 